<template>
    <page-meta :page-style="$theme.pageStyle">
        <!-- #ifndef H5 -->
        <navigation-bar
            :front-color="$theme.navColor"
            :background-color="$theme.navBgColor"
        />
        <!-- #endif -->
    </page-meta>
    <!-- #ifndef H5 -->

    <!-- #endif -->
    <view class="news">
<!--        <view class="news-banner">-->
<!--            <image src="@/static/images/news/news-banner.png" />-->
<!--        </view>-->
        <!-- 内容 -->
        <news-list :cid="cateId" class='news-list'></news-list>

<!--        <tabs-->
<!--            :current="current"-->
<!--            @change="handleChange"-->
<!--            height="80"-->
<!--            bar-width="60"-->
<!--            :barStyle="{ bottom: '0' }"-->
<!--        >-->
<!--            <tab v-for="(item, i) in tabList" :key="i" :name="item.name">-->
<!--                <view class="news-list pt-[20rpx]">-->
<!--                </view>-->
<!--            </tab>-->
<!--        </tabs>-->

        <view class="member-service" v-if='!isLogin' @click="contactUs">
            <view class="member-service-img"></view>
            开通会员，练题经题库
        </view>
        <tabbar />
    </view>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
import NewsList from './component/news-list.vue'
import { getArticleCate } from '@/api/news'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'
const userStore = useUserStore()
const { userInfo, isLogin } = storeToRefs(userStore)

const tabList = ref<any>([])
const current = ref<number>(0)
const cateId = ref(0);

const handleChange = (index: number) => {
    console.log(index)
    current.value = Number(index)
}

const getData = async () => {
    const data = await getArticleCate()
    tabList.value = [{ name: '全部', id: '' }].concat(data)
}

function contactUs(){
    uni.navigateTo({url: '/pages/customer_service/customer_service'})
}

onLoad((options) => {
    console.log(options);
    cateId.value = options.id
    // getData()
})

</script>

<style lang="scss">
.news {
    height:100vh;
    width: 100%;
    overflow-y: auto;
    background-color: #f5f6fa;
    position: absolute;

    & > .member-service{
        width: 90%;
        position: absolute;
        left: 5%;
        bottom: 20rpx;
        height: 80rpx;
        line-height: 80rpx;
        background-color: #31302e;
        border-radius: 40rpx;
        z-index: 1000;
        color:#fff;
        text-align: center;

        .member-service-img{
            background: url("@/static/images/icon/member-icon.png") no-repeat;
            background-size: 50rpx 50rpx;
            display: inline-block;
            width: 50rpx;
            height: 50rpx;
            position: relative;
            top: 15rpx;

        }
    }

    //.news-banner{
    //    width: 100%;
    //    height: 400rpx;
    //
    //    image {
    //        width: 100%;
    //        height: 400rpx;
    //    }
    //}
    
    &-search {
        margin-bottom: 2rpx;
    }

    &-list {
        height: calc(100vh - 272rpx - env(safe-area-inset-bottom));
        width: 100%;
    }
}
</style>
